<template>
    <div class="categories">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 15px;margin-bottom: 15px">
            <el-button type="primary" @click='showAddDialog'>添加商品</el-button>
        </div>
        <tree-grid
        :treeStructure="true"
        :columns="columns"
        :data-source="dataSource"
        @deleteCate="deleteCategory"
        @editCate="editCategory">
        </tree-grid>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size='10'
            layout="total, sizes, prev, pager, next, jumper"
            style="background-color:#F5F5F5"
            :total="total">
        </el-pagination>
        <el-dialog title="添加商品分类" :visible.sync="addDialogFormVisible">
            <el-form :model="addUserForm"  label-width="100px" ref='addUserForm'>
                    <el-form-item label="分类名称">
                        <el-input v-model="addUserForm.cat_name"></el-input>
                    </el-form-item>
                    <el-form-item label="父级名称">
                    <el-cascader
                        :options="catelist"
                        v-model="selectedOptions"
                        @change="handleChange"
                        :props='categoriesProps'>
                    </el-cascader>
                    </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addGoodsSubmit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
import {getcategerieslist, addCategory} from '@/api/login.js'
export default {
  components: {
    TreeGrid
  },
  data () {
    return {
      dataSource: [],
      catelist: [],
      selectedOptions: [],
      addDialogFormVisible: false,
      total: 0,
      pagesize: 10,
      pagenum: 1,
      addUserForm: {
        cat_pid: '',
        cat_name: '',
        cat_level: ''
      },
      categoriesProps: {
        children: 'children',
        label: 'cat_name',
        value: 'cat_id'
      },
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }]
    }
  },
  methods: {
    deleteCategory (cid) {
      console.log(cid)
    },
    editCategory (cid) {
      console.log(cid)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.initList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.initList()
    },
    initList () {
      getcategerieslist({type: 3, pagenum: this.pagenum, pagesize: this.pagesize})
        .then(res => {
          console.log(1213213123, res)
          if (res.meta.status === 200) {
            this.dataSource = res.data.result
            this.total = res.data.total
          }
        })
    },
    showAddDialog () {
      this.addDialogFormVisible = true
      getcategerieslist({type: 2})
        .then(res => {
          console.log(res)
          if (res.meta.status === 200) {
            this.catelist = res.data
          }
        })
    },
    // handleChange (value) {
    //   console.log(value)
    //   this.addUserForm.cat_pid = value
    // },
    addGoodsSubmit () {
      if (this.selectedOptions.length === 0) {
        this.addUserForm.cat_level = 0
        this.addUserForm.cat_pid = 0
      } else if (this.selectedOptions.length === 1) {
        this.addUserForm.cat_level = 1
        this.addUserForm.cat_pid = this.selectedOptions[0]
      } else if (this.selectedOptions.length === 2) {
        this.addUserForm.cat_level = 2
        this.addUserForm.cat_pid = this.selectedOptions[1]
      }
      addCategory(this.addUserForm)
        .then(res => {
          if (res.meta.status === 201) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.addDialogFormVisible = false
            this.initList()
          }
        })
    }
  },
  mounted () {
    this.initList()
  }
}
</script>

<style lang="scss" scoped>

</style>
